{% extends 'eval/base.html' %}
{% load staticfiles %}
{% block link_script%}
<link rel="stylesheet" href="{% static 'css/sm.css' %}">
{% endblock%}

{% block base_body %}

<div class="ui fluid image" id="img">
    <div class="ui form" id="biao">
        <div class="denglu">登陆</div>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>

        <!--<div class="inline field" id="zhanghao">-->
            <!--<label id="four_01">账号</label>-->
            <!--<input type="text" placeholder="请输入手机号" class="phone" maxlength="11" style="color:#999;"-->
                   <!--onBlur="textBlur(this)" onFocus="textFocus(this)"/>-->
        <!--</div>-->


        <!--&lt;!&ndash;<div class="inline field" id="name">&ndash;&gt;-->
            <!--&lt;!&ndash;<label id="four_02">姓名</label>&ndash;&gt;-->
            <!--&lt;!&ndash;<input type="text" placeholder="请输入真实姓名">&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--<div class="inline field" id="pwd">-->
            <!--<label id="four_03">密码</label>-->
            <!--<input type="password" class="password" placeholder="请输入密码" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error3"></span>-->
        <!--</div>-->
        <!--<div class="ui right aligned container">-->
            <!--<p id="zhuce">没有账号，去 <a href="#">注册</a></p>-->
        <!--</div>-->
        <!--<button class="ui big button" id="login">登录</button>-->

        <form method="post">
            {% csrf_token %}
            {{ form }}
            <button class="ui big button" id="login">登录</button>
        </form>
    </div>
</div>
{% endblock %}
{% block base_foot %}{% endblock %}
<script>

    function textFocus(el) {
        if (el.defaultValue == el.value) { el.value = ''; el.style.color = '#333'; }
    }
    function textBlur(el) {
        if (el.value == '') { el.value = el.defaultValue; el.style.color = '#999'; }
    }

    $(function(){
        //手机号栏失去焦点
        $(".phone").blur(function(){
            reg=/^1[3|4|5|7|8][0-9]\d{4,8}$/i;//验证手机正则(输入前7位至11位)

            if( $(this).val()==""|| $(this).val()=="请输入您的手机号！")
            {
                $(this).attr('placeholder','请输入您的手机号');
            }
            else if($(this).val().length<11)
            {
                $(this).attr('placeholder','请输入的长度有误');
            }
            else
            {
                $(this).addClass("checkedN");
                $(this).removeClass("errorC");
                $(this).next().empty();
            }
        });
        //密码栏失去焦点
        $(".password").blur(function(){
            reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;
            if(!reg.test($(".password").val()))
            {
                $(this).attr('placeholder','请输入6~12位的数字、字母或特殊字符！');
            }
            else
            {
                $(this).removeClass("errorC");
                $(".error3").empty();
                $(this).addClass("checkedN");
            }
        });
    })
</script>